import { CaretDownOutlined } from '@ant-design/icons'
import { Dropdown } from 'antd'
import type { MenuProps } from 'antd'
import { useNavigate } from 'react-router-dom'

export default function Avatar() {
  const navigate = useNavigate()
  const items: MenuProps['items'] = [
    {
      label: <a>切换账号</a>,
      key: '0'
    },
    {
      label: (
        <a
          onClick={() => {
            localStorage.removeItem('refreshToken')
            localStorage.removeItem('accessToken')
            localStorage.removeItem('persist:root')
            navigate('/login')
          }}
        >
          退出登录
        </a>
      ),
      key: '1'
    }
  ]
  return (
    <Dropdown menu={{ items }} trigger={['hover']}>
      <div onClick={(e) => e.preventDefault()} className="avatar">
        <img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"></img>
        <CaretDownOutlined />
      </div>
    </Dropdown>
  )
}
